<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>自定义事件</title>
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="../../js/vue.js"></script>
  <style>
  .component {
    text-align: center;
    color: #42b983;
    font-size: 28px;
    font-family: "微软雅黑";
  }
  </style>
</head>

<body>
<div id="event-example">
  <p>{{total}}</p>
  <button-content v-on:increment="incrementTotal"></button-content>
  <button-content v-on:increment="incrementTotal"></button-content>
</div>
  <script type="text/javascript">
  Vue.component('button-content',{
    template:'<button type="button" v-on:click="increment">{{counter}}</button>',
    data:function(){
      return{
        counter:0
      }
    },
    methods:{
      increment:function(){
        this.counter += 1
        this.$emit('increment')
      }
    },
  });


  new Vue({
    el:"#event-example",
    data:{
      total:0
    },
    methods:{
      incrementTotal:function(){

        this.total += 1
      }
    }
  });
  </script>
</body>

</html>
